<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Terain Layer test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../js/require.js"></script>
    <script type="text/javascript" src="../js/imageloader.js"></script>
    <script type="text/javascript" src="../js/map.js"></script>
    <script type="text/javascript" src="../js/settings.js"></script>
    <script type="text/javascript" src="../js/terrainlayer.js"></script>
    <script type="text/javascript" src="../js/tile.js"></script>
    <script type="text/javascript" src="../data/tilesdefinition.js"></script>
    <script type="text/javascript" src="../data/buildingsdefinition.js"></script>
    <script type="text/javascript" src="../data/unitsdefinition.js"></script>
    <script type="text/javascript" src="../data/settings.js"></script>
    <script type="text/javascript">
var init = function () {
    var loader;
    loader = new ImageLoader();
    loader.addObserver(function (percent) {
        if (percent == 1) {
            drawTerrain();
        }
    });
    loader.setPathPrefix('../');
    loader.load(BuildingsDefinition, UnitsDefinition, TilesDefinition);
};

var drawTerrain = function () {
    var map, layer, dimensions, x, y, tx, ty, context;
    map = new Map();
    map.randomMap(100, 100);
    layer = new TerrainLayer();
    layer.setCanvas(document.getElementById('canvas'));
    layer.setMap(map.getMap());
    layer.init();
    dimensions = layer.getBufferDimensions();
    x = y = tx = ty = 0;
    context = document.getElementById('canvas').getContext('2d');
    setInterval(function () {
        var date = new Date().getTime();
        layer.display(x, y);
        context.fillText("RenderTime: " + (new Date().getTime() - date), 9, 9);
        if ((tx == x) && (ty == y)) {
            tx = Math.floor(Math.random() * dimensions.width - 1);
            ty = Math.floor(Math.random() * dimensions.height - 1);
        }
        x += tx > x ? 1 : (tx < x ? -1 : 0);
        y += ty > y ? 1 : (ty < y ? -1 : 0);
    }, 10);
};

addEventListener('DOMContentLoaded', init, false);
    </script>
  </head>
  <body>
    <canvas width="800" height="600" id="canvas" style="border: 1px solid black"></canvas>
  </body>
</html>
